import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
import { withKnobs } from "@storybook/addon-knobs";
import { ViewPort, CenteredVertically } from "../../";
import { blue } from "../Utils";
import { CommonHeader } from "../Utils";

<CommonHeader />

<Meta title="Components/CenteredVertically" component={CenteredVertically} />

## CenteredVertically

Centers children vertically within a space.

Alternatively you can specify `centerContent={CenterType.Vertical}` or `centerContent="vertical"` 
on a space.

<Canvas>
	<Story name="Default">
		<ViewPort style={blue}>
			<CenteredVertically>Centered content vertically</CenteredVertically>
		</ViewPort>
	</Story>
</Canvas>